<template>
<el-card class="content">
  <div slot="header" class="clearfix">
    <span>用户管理</span>
  </div>
  <div style="margin-bottom: 20px">
    <el-button type="primary" @click="addFormDialogVisible=true">添加</el-button>
    <el-input v-model="searchParam.name" placeholder="请输入姓名" style="width: 30%;margin-left: 10px;margin-right: 10px;"></el-input>
    <el-button type="primary" @click="getUser">查找</el-button>
  </div>
  <el-table
      :data="tableValue"
      border>
    <el-table-column
        prop="id"
        label="id"
    >
    </el-table-column>
    <el-table-column
        prop="account"
        label="账号"
    >
    </el-table-column>
    <el-table-column
        prop="name"
        label="姓名">
    </el-table-column>
    <el-table-column
        prop="phone"
        label="联系方式">
    </el-table-column>
    <el-table-column
        prop="password"
        label="密码">
    </el-table-column>
    <el-table-column
        prop="createTime"
        label="注册时间">
    </el-table-column>
    <el-table-column
        label="身份">
      <template slot-scope="scope">
        <el-tag v-if="scope.row.role===false">普通用户</el-tag>
        <el-tag v-if="scope.row.role===true" type="danger">管理员</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
            size="mini"
            type="danger"
            v-if="scope.row.role===true" disabled>不可操作</el-button>
        <el-button
            size="mini"
            @click="handleUpdate(scope.row)" v-if="scope.row.role===false">编辑</el-button>
        <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)" v-if="scope.row.role===false">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="block" style="margin-top: 20px">
    <el-pagination
        :page-size="this.searchParam.pageSize"
        :current-page="this.searchParam.pageNum"
        layout="prev, pager, next"
        :total="this.total"
        @current-change="handleCurrentChange"
    ></el-pagination>
  </div>

  <el-dialog
      title="添加用户"
      :visible.sync="addFormDialogVisible"
      width="20%"
      center>
    <el-form label-position="left" label-width="80px" :model="newUser">
      <el-form-item label="账号">
        <el-input v-model="newUser.account"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="newUser.password"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="newUser.name"></el-input>
      </el-form-item>
    </el-form>
    <el-button @click="addFormDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addUser">确 定</el-button>
  </el-dialog>

  <el-dialog
      title="更新用户信息"
      :visible.sync="updateFormDialogVisible"
      width="20%"
      center>
    <el-form label-position="left" label-width="80px" :model="updUser">
      <el-form-item label="密码">
        <el-input v-model="updUser.password"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="updUser.name"></el-input>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input v-model="updUser.phone"></el-input>
      </el-form-item>
    </el-form>
    <el-button @click="updateFormDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateUser">确 定</el-button>
  </el-dialog>
</el-card>
</template>

<script>
import {userDelete, userRegister, userSearch, userUpdate} from "@/api/userApi";

export default {
  name: "UserInfo",
  data(){
    return{
      total:0,
      searchParam:{
        pageNum:1,
        pageSize:5,
        name:'',
      },
      newUser:{account:'',name:'',password:''},
      updUser:{id:'',name:'',password:'',phone:''},
      tableValue:[],
      addFormDialogVisible:false,
      updateFormDialogVisible:false,
    }
  },
  methods:{
    getUser(){
      userSearch(this.searchParam).then(res=>{
          if (res.code===200){
            this.tableValue=res.data.records;
            this.total=res.data.total;
          }
      })
    },
    addUser(){
      userRegister(this.newUser).then(res=>{
        if (res.code===200){
          this.getUser();
          this.addFormDialogVisible = false;
        }
      })
    },
    handleDelete(id){
      userDelete(id).then(res=>{
        if (res.code===200){
          this.getUser();
        }
      })
    },
    handleUpdate(user){
      this.updUser=user;
      this.updateFormDialogVisible=true;
    },
    updateUser(){
      userUpdate(this.updUser).then(res=>{
          if (res.code===200){
            this.getUser();
            this.updateFormDialogVisible=false;
          }
      })
    },
    handleCurrentChange(val) {
      this.searchParam.pageNum=val;
      this.getUser();
    }
  },
  mounted() {
    this.getUser();
  }
}
</script>

<style scoped>

</style>
